.carousel {
	position: relative;
	height: 64vh;
		width: calc(100% + 2*$page-margin);
		left: -$page-margin;
	margin-bottom: 3.2em;
	.slider {
			position: absolute;
			bottom: 0;
			max-width: 35%;
			right: $page-margin;
		}
	&-button {
		position: absolute !important;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100;
		
		&.right {
			right: 0.5em;
		}
		
		&.left {
			left: 0.5em;
		}
	}
	
	&-indicator {
		aspect-ratio: 1.77777;
			overflow: hidden;
			border-radius: 2px;
			padding: 2px;
			transition: opacity $transition-time-fast;
			opacity: 0.5;
			width: auto;
		&:hover {
			cursor: pointer;
			opacity: 0.8;
		}
		
		&-container {
			display: flex;
			gap: 1em;
			align-items: center;
			justify-content: center;
		}
&-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

&-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgb(155 155 155 / 0.4);
	border-radius: 4px;
}
		&.active {
			opacity: 1;
			
				.material-symbols-rounded {
			
					--fill: 1;
				}
			}
			}
}